<template>
	<view style="padding-bottom: 100rpx;">
		<u-navbar :title="'商品详情'" title-color="#FFFFFF" back-icon-color="#FFFFFF" is-back immersive :background="{
			background: 'none'
		}" :border-bottom="false"></u-navbar>
		<view class="wrap">
			<swiper @change="swiperChange" class="swiper" :duration="500" :current='current' autoplay circular>
				<swiper-item v-for="(item,index) in lists.images.split(',')">
					<image :src="item" style="width: 100%;height: 100%" />
				</swiper-item>
			</swiper>
			<view class="wrap_2">
				<text>{{current+1}}</text>
				<text>/</text>
				<text>{{lists.images.split(',').length}}</text>
			</view>

		</view>
		<view class="body">
			<view style="padding: 30rpx 30rpx 10rpx 30rpx">
				<view class="body_1">
					<text>{{lists.goods_name}}
					</text>
					<!-- <button open-type="share" style="background-color: white"> -->
					<image @click="fx_"
						src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164662019488887.png" />

				</view>
				<view class="body_2">
					<text>￥</text>
					<text>{{xuan.goods_price}}</text>
				</view>
			</view>
			<u-gap height="10" bg-color="#F4F4F4"></u-gap>
			<!-- //规格 -->
			<view class="body_3">
				<view class="body_3_1" @click="guigeshow=true">
					<view class="body_3_2">

						{{$jf('选择规格','選擇規格')}}
					</view>
					<view class="body_3_2_1">
						<view class="body_3_3">
							共{{lists.specs.length}}
							{{$jf('种规格可选','種規格可選')}}
						</view>
						<image src="../../static/you.png" mode=""></image>
					</view>

				</view>
				<view class="body_3_1" style="	border-bottom: none" @click="$to('/pages/shopping/replace')">
					<view class="body_3_2">
						{{$jf('到货地址','到貨地址')}}
					</view>
					<view class="body_3_2_1">
						<view class="body_3_t">
							<text>河南鄭州</text>
							<text>金水區 大江路街道川江路南100米</text>
						</view>
						<image src="../../static/you.png" />
					</view>

				</view>
			</view>
			<u-gap height="10" bg-color="#F4F4F4"></u-gap>
			<!-- 评论 -->
			<view class="pj">
				<text class="pj_1"> {{$jf('用户评价','用戶評價')}} {{'（'+info2.total+'）'}}</text>
				<view class="pj_2">
					{{info2.praise}}%{{$jf('好评率','好評率')}}
					<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164662186633037.png"
						/>
				</view>
			</view>
			<view class="pjbody" v-for="(item,index) in listspl">
				<view class="pjbody_1">
					<image :src="item.avatar" />
					<view class="pjbody_1_2">
						<view class="pjbody_1_2_1" style="display: flex;">
							<text>{{item.nickname}}</text>
							<uni-rate allow-half size="18" v-model="item.star" @change="onChange" />
						</view>
						<view class="pjbody_1_2_3">
							{{$jf('发布日期','發佈日期')}}：{{item.create_time}}
						</view>
					</view>
				</view>
				<view class="pjbody_2">
					<text>{{item.spec}}</text>
					<!-- <text>拉菲(LAFITE)紅葡萄酒 750ml*6瓶</text> -->
					<text>{{item.content}}</text>
					<!-- <text>香醇口感非常不錯，包裝精美，快過年了，特別適合送 禮產品高端上檔次！</text> -->
				</view>
				<view class="xian" v-if="index!=listspl.length-1">
				</view>
			</view>
			<view v-if="listspl.length==0" style="text-align: center;background-color: #F4F4F4;">
				~没有数据~
			</view>
			<u-loadmore v-if="listspl.length" style="margin-top: 20rpx;" :status="status" icon-type="flower"
				@loadmore="loadmore" :load-text="{
			loadmore: $jf('点击或轻轻上拉','點擊或輕輕上拉'),
			loading: $jf('努力加载中','努力加載中'),
			nomore: $jf('实在没有了','努力加載中')
			}" />
			<u-gap height="10" bg-color="#F4F4F4" />
			<!-- 评论 -->
			<view class="pj">
				<text class="pj_1">{{$jf('商品详情介绍','商品詳情介紹')}}</text>
			</view>
			<mp-html :content="lists.content"></mp-html>
			<view class="pj">
				<text class="pj_1">{{$jf('推荐產品','推薦產品')}}</text>
			</view>
			<reco-mmend />
		</view>
		<!-- 规格选择器 -->
		<view class="guige">
			<u-popup mode="bottom" v-model="guigeshow">
				<view class="bottom">
					<image src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164663353780192.png"
						class="close" @click="guigeshow_(false)" />

					<view class="bottom_2">
						<image style="border-radius: 8rpx;" :src="xuan.spec_image" />
						<view class="bottom_2_1">
							<text>{{lists.goods_name}}</text>
							<text>
								<label style="font-size: 20rpx;">￥</label>
								{{xuan.goods_price}}</text>
						</view>

					</view>
					<view class="xian">
					</view>
					<view class="bottom_3">
						{{$jf('选择规格','選擇規格')}}
					</view>
					<view class="bottom_4">
						<view class="bottom_4_1" @click="xuan=item" :style="{
							 'border':xuan.goods_spec_id==item.goods_spec_id?'1rpx solid #00795E':''
						 }" v-for="(item,index) in lists.specs">
							<image :src="item.spec_image" />
							<text>{{item.specs_name}}</text>
						</view>
					</view>
					<view style="margin-top: 20rpx; border: 1rpx solid #EDEDED;">
					</view>
					<view class="num">
						<text class="num_1">{{$jf('选择数量','選擇數量')}}</text>
						<view class="num_2">
							<text>-</text>
							<text>1</text>
							<text>+</text>
						</view>
					</view>
					<view style="margin-top: 40rpx; border: 1rpx solid #EDEDED;">
					</view>
					<!-- 底部 -->
					<view class="foot">
						<text>{{$jf('加入购物车','加入購物車')}}</text>
						<text @click="$to('/pages/shopping/purchase')">{{$jf('立即购买','立即購買')}}</text>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 分享朋友圈 -->
		<u-popup v-model="fx" mode='bottom'>
			<view class="warp">
				<button type="default" open-type="share">分享到微信</button>
			</view>
		</u-popup>
		<!-- 底部 -->
		<view class="foot">
			<text @click="jiaru">{{$jf('加入购物车','加入購物車')}}</text>
			<text @click="guigeshow_(true)">{{$jf('立即购买','立即購買')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fx: false,
				xuan: {},
				current: 0,
				status: 'loadmore',
				id: '',
				form: {
					page: 1,
				},
				// guige: {}, //选中的规格
				guigeshow: false,
				info: {},
				info2: {},
				list: [
					"https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164661981722252.png",
					"https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164661981722252.png",
					"https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164661981722252.png",
					"https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-07/164661981722252.png",
				]
			};
		},
		  onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		    }
		    return {
		      title: this.lists.goods_name,
		      path: '/pages/shopping/details?id=9'
		    }
		  },
		onLoad(e) {
			this.id = e.id
			this.getinfo()
			this.pinglun()
		},
		computed: {

			//评论
			listspl() {
				if (this.$store.state.ziti == 1) {
					return this.info2.data
				} else {
					return this.info2.multiply
				}
			},
			lists() {
				if (this.$store.state.ziti == 1) {
					return this.info.simple
				} else {
					return this.info.multiply
				}
			}
		},
		methods: {
			//分享
			fx_(){
				this.fx=true
			},
			// 规格选择
			guigeshow_(a) {
				this.guigeshow = a
			},
			//加入购物车
			jiaru() {
				console.log(this.xuan)
				// return
				this.api('goods/shoppigAdd', {
					number: 1,
					goods_id: this.xuan.goods_id,
					spec_id: this.xuan.goods_spec_id,
				}).then(res => {
					this.$toast(res.msg)
				})
			},
			loadmore() {
				this.form.page++
				this.pinglun()
			},
			//评论列表
			pinglun() {
				this.form.goods_id = this.id
				this.api('goods/goodsConntent', this.form).then(res => {
					if (this.form.page == 1) {
						this.info2 = res.data
					} else {
						if (res.data.data.length > 0) {
							this.info2.data.push(...res.data.data)
							this.info2.multiply.push(...res.data.multiply)
						} else {
							this.status = "nomore"
						}
					}
				})
			},
			getinfo() {
				this.api('goods/goodsMsg', {
					id: this.id
				}).then(res => {
					this.info = res.data
					this.xuan = this.lists.specs[0]
					console.log(this.xuan)
				})
			},
			//轮播图的切换事件
			swiperChange(e) {
				this.current = e.target.current //获取当前轮播图片的下标, 可以给当前指示点加样式
			}
		}

	}
</script>

<style lang="scss">
	/deep/ uni-button:after {
		border: none !important;
	}
	/deep/ button:after {
		border: none !important;
	}
	.warp{
		height: 200rpx;
		button{
		}
	}
	.num {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		align-items: center;

		.num_1 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}

		.num_2 {
			display: flex;

			text:nth-of-type(1) {
				display: inline-block;
				width: 58rpx;
				height: 60rpx;
				background: #F9F9F9;
				border: 1rpx solid #EDEDED;
				text-align: center;
				line-height: 58rpx;
			}

			text:nth-of-type(3) {
				display: inline-block;
				width: 58rpx;
				height: 60rpx;
				background: #F9F9F9;
				border: 1rpx solid #EDEDED;
				text-align: center;
				line-height: 58rpx;
			}

			text:nth-of-type(2) {
				display: inline-block;
				width: 60rpx;
				height: 60rpx;
				background: #FFFFFF;
				border: 1rpx solid #EDEDED;
				text-align: center;
				line-height: 58rpx;
			}
		}

	}

	.bottom {
		width: 100%;
		height: 935rpx;
		background-color: #FFFFFF;
		position: relative;
		padding: 50rpx 30rpx 150rpx 30rpx;
		// border: 1px solid black;
		overflow: auto;

		.bottom_4 {
			.bottom_4_1 {
				display: inline-block;
				margin-bottom: 20rpx;
				height: 63rpx;
				min-width: 396rpx;
				background: #F6F6F6;
				border-radius: 4rpx;
				align-items: center;
				padding: 0 10rpx 0 10rpx;

				text {
					font-size: 24rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #181818;
				}

				image {
					width: 38rpx;
					margin-right: 20rpx;
					position: relative;
					top: 10rpx;
					height: 43rpx;
				}
			}
		}

		.bottom_3 {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			font-family: Source Han Serif CN;
			font-weight: 400;
			color: #666666;
		}

		.xian {
			margin-top: 50rpx;
			height: 1px;
			background: #EDEDED;
		}

		.bottom_2 {
			justify-content: space-between;
			display: flex;
			margin-top: 40rpx;

			.bottom_2_1 {
				position: relative;

				width: 66%;

				text:nth-of-type(1) {
					display: block;
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #181818;
				}

				text:nth-of-type(2) {
					position: absolute;
					bottom: 0;
					font-size: 34rpx;
					font-family: Source Han Serif CN;
					font-weight: bold;
					color: #AB1E25;
				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.close {
			position: absolute;
			width: 25rpx;
			right: 30rpx;
			top: 30rpx;
			height: 25rpx;
		}
	}

	.foot {
		position: fixed;
		left: 0;
		width: 100%;
		height: 104rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		;
		bottom: 0;

		text:nth-of-type(2) {
			width: 446rpx;
			height: 80rpx;
			background: #00795E;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			color: #FFFFFF;
		}

		text:nth-of-type(1) {
			display: inline-block;
			width: 218rpx;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid #00795E;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: Source Han Serif CN;
			font-weight: 600;
			text-align: center;
			line-height: 80rpx;
			color: #00795E;
		}

		text:nth-of-type(2) {}
	}

	.body {
		.pjbody {
			padding: 30rpx 30rpx 0rpx 30rpx;

			.xian {
				height: 1rpx;
				background: #E5E5E5;
				margin-top: 20rpx;
			}

			.pjbody_2 {
				text:nth-of-type(1) {
					margin-top: 20rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					font-size: 22rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #B12A31;
					display: inline-block;
					height: 40rpx;
					background: rgba($color: #AB1E25, $alpha: 0.05);
					border-radius: 6rpx;
					line-height: 40rpx;
				}

				text:nth-of-type(2) {
					margin-top: 20rpx;
					display: block;
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 500;
					color: #333333;
					line-height: 45rpx;
				}
			}

			.pjbody_1 {
				display: flex;

				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 100%;
				}

				.pjbody_1_2 {
					margin-left: 25rpx;

					.pjbody_1_2_3 {
						margin-top: 10rpx;
						font-size: 22rpx;
						font-family: Source Han Serif CN;
						font-weight: 500;
						color: #999999;
					}

					.pjbody_1_2_1 {
						margin-top: -8rpx;

						text {
							font-size: 28rpx;
							font-family: OPPOSans;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

		}

		.pj {
			padding: 30rpx 30rpx 30rpx 30rpx;
			border-bottom: 1rpx solid #E5E5E5;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pj_1 {
				font-size: 32rpx;
				font-family: Source Han Serif CN;
				font-weight: bold;
				color: #181818;
			}

			.pj_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-family: Source Han Serif CN;
				font-weight: 500;
				color: #00795E;

				image {
					width: 11rpx;
					margin-left: 15rpx;
					height: 12rpx;
				}
			}
		}

		.body_3 {
			padding: 0rpx 30rpx 0rpx 30rpx;

			.body_3_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #E5E5E5;
				padding: 30rpx 0 30rpx 0;

				.body_3_2_1 {
					width: 80%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.body_3_t {
						text {
							position: relative;
							// top: 15rpx;
							display: block;

							text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: Source Han Serif CN;
								font-weight: 500;
								color: #181818;
							}

							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: Source Han Serif CN;
								font-weight: 400;
								color: #999999;
							}
						}
					}

					.body_3_3 {
						width: 190rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						background: #F4F4F4;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-family: Source Han Serif CN;
						font-weight: 400;
						color: #181818;
					}
				}

				.body_3_2 {
					font-size: 28rpx;
					font-family: Source Han Serif CN;
					font-weight: 400;
					color: #666666;
				}


				image {
					width: 11rpx;
					height: 22rpx;
				}
			}


		}
	}

	.body_2 {
		margin-top: 20rpx;

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			color: #AB1E25;
			line-height: 22px;
		}

		text:nth-of-type(2) {
			font-size: 38rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			color: #AB1E25;
			line-height: 22px;
		}
	}

	.body_1 {
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			width: 80%;
			font-size: 36rpx;
			font-family: Source Han Serif CN;
			font-weight: bold;
			color: #111111;
		}

		image {
			width: 47rpx;
			height: 43rpx;
		}
	}

	.wrap {
		position: relative;
		height: 715rpx;

		.wrap23 {
			margin-left: 20rpx;
			position: absolute;
			z-index: 9999
		}

		.wrap_2 {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(19, 19, 20, 0.2);
			color: white;
			padding: 5rpx 25rpx 5rpx 25rpx;
			border-radius: 50rpx;

			text:nth-of-type(3) {
				font-size: 20rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				line-height: 0px;
				color: #FFFFFF;
				opacity: 1;
			}

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				line-height: 0px;
				color: #FFFFFF;
				opacity: 1;
			}
		}

		.swiper {
			height: 100%
		}

	}
</style>
